<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination } from "swiper/modules";
import "swiper/css/bundle";
import { reactive, ref, computed  } from "vue";
// 仓库
import { useStore } from "vuex";
const store = useStore();

// 工具
import GTC_tools from "@/views/shotstack/utils/helper.js";


// canvas 组件
import konvaCount from '@/views/shotstack/components/konvaCount/index.vue'
const konvaCountRef = ref()

const props = defineProps({
  // 作为组件预览的列表
  viewList: {
    type: Array,
    default: () => {
      return null;
    },
  }
});

// 图文剪辑编辑页面 预览的数据
const GraphicTextMixCutData = computed(() => {
    return store.state.GraphicTextMixCut.GraphicTextMixCutData?.resource_data || [];
});

// 渲染的列表
const useList = computed(() =>{
  // 传递了 优先使用 props 传递的数据
  if (props.viewList) {
    return props.viewList
  }
  return GraphicTextMixCutData.value
})

// swiper 实例
const swiperRef = ref()

const state = reactive({
  activeIndex:'',
      swiperList: [
        {
          id: 1,
          percent: 0,
          img:'https://haowallpaper.com/link/common/file/getCroppingImg/15851050837315904'
        },
        {
          id: 2,
          percent: 100,
          img:'https://haowallpaper.com/link/common/file/getCroppingImg/15946470577982848'
        }
  ],
  autoplay: {
    // 户操作swiper之后，是否禁止autoplay。默认为true：停止。
    disableOnInteraction: false,
    autoplay: false,
    // 自动切换 延迟时间
    delay: 3000,
    // 鼠标悬停 自动停止切换
    pauseOnMouseEnter:true
  }
});

const handleSwiperChange = (e) => {
  state.activeIndex = e.realIndex
};

// 获取并存放swiper实例
const setControlledSwiper = (swiper) => {
  swiperRef.value = swiper;
};

// 点击下方滚动条, 切换当前高亮的 swiper
const progressTap = (item,index) => {
  state.activeIndex = index
  console.log(swiperRef.value, 'swiper 实例');

  swiperRef.value.slideTo(index)
  // swiperRef.value.slideTo(index)
}
</script>

<template>
    <div class="ViewSwiper">
      <!-- 
      spaceBetween: 在slide之间设置距离 单位px
      loop: 无限循环
      slidesPerView: 设置slider容器能够同时显示的slides数量(carousel模式)
      centeredSlides: 居中幻灯片。设定为true时，当前的active slide 会居中，而不是默认状态下的居左
      slideChangeTransitionEnd: 回调函数，swiper从一个slide过渡到另一个slide结束时执行
      :pagination="{
        type: 'progressbar',
        bulletClass: 'swiper_pagination_cls',
        clickable:true
      }"
      -->
    <!-- <div style="font-size: 20px; color: red;">
      {{state.activeIndex,'swiper高亮下标'}}
    </div> -->
            
        <swiper
            class="swiper"
            @slideChangeTransitionEnd="handleSwiperChange"
            direction="horizontal"
            :loop="true"
            :autoplay="state.autoplay"
            :slidesPerView="1"
            :spaceBetween="0"
            :centeredSlides="false"
            :modules="[Autoplay, Pagination]"
            @swiper="setControlledSwiper"
          >
            <swiper-slide
              v-for="(item) in useList"
              :key="item.id"
              style="height: 100%; width: 100%;"
            >
              <div class="swiper_item">
                <div class="phone_box">
                    <konvaCount ref="konvaCountRef"
                      :editItem="JSON.parse(JSON.stringify(item.texts[0]))"
                      :images="JSON.parse(JSON.stringify(item.images))"
                      :pixel="GTC_tools.getPixel(item.image_tpl)"
                      :stickers="item.stickers"
                      :image_tpl="item.image_tpl"
                      @update_position="update_position"
                      @saveImg="saveImg"
                      :isView="true"
                    ></konvaCount>
                </div>

              </div>
            </swiper-slide>
          </swiper>

          <div class="swiper_bottom"> 
			<a-progress class="progress_item" @click="progressTap(item,index)" 
            status="exception" 
            strokeColor="#2878FF" 
            :showInfo="false" 
            :strokeWidth="3"
            v-for="(item, index) in useList" 
            :percent="index <= state.activeIndex ? 100 : 0" 
            :key="index" 
       />
		</div>
    </div>
</template>

<style lang="less" scoped>

    .ViewSwiper{
        height: 100%;
        width: 100%;
        overflow: hidden;
        // background-color: #ececec;
        background: #000;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        .swiper{
          height: 100%;
          width: 100%;
        }

        .swiper_item {
          flex: 1;
          width: 100%;
          height: 100%;
          padding: 20px;
          display: flex;
          align-items: center;
          justify-content: center;

          background: #000;

          // 手机组件容器
          .phone_box{
            height: 640px;
            width: 360px;
            overflow: hidden;
            zoom: 0.8;
          }
        }

        .swiper_pagination_cls{

        }

    .swiper_bottom{
			// position: absolute;
			// left: 0;
			// bottom: 0px;
			width: 100%;
			height: 30px;
      padding: 10%;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1;
      gap: 0 10px;

      .progress_item {
        flex: 1;
          // width: 200px;
          // margin-left: 10px;
          cursor: pointer;
      }
		}
    }
</style>